<!doctype html>
<html>

<head>
  <title>Auto</title>
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
  <meta name="format-detection" content="telephone=no" />
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
  </style>
</head>
<style>
  .r-layout {
    padding: 10px;
    margin-bottom: 100px;
  }
  .r-item {
    border-top: solid 1px #f5f5f5
  }
  .send-from {
    position: fixed;
    left: 15px;
    right: 15px;
    bottom: 15px;
    display: flex;
    border: solid 1px #f5f5f5;
    height: 50px;
  }
  .select {
    width: 100px;
    height: 50px;
    font-size: 16px;
  }
  .select > option {
    height: 40px;
    
  }
  .input {
    flex: 1;
    padding: 0 15px;
    margin: 0 15px;
  }
  .btn {
    width: 80px;
    text-align: center;
  }
</style>
<body>
  <div id="app">
    <h3>通讯记录</h3>
    <ul class="r-layout">
      <li class="r-item" v-for="r in records">{{ r.cmd | cmdFilter }} - {{ r }}</li>
    </ul>
    <div class='send-from'>
      <input class="input" placeholder="接收的设备号，英文逗号分割" v-model="device"/>
      <select class="select" v-model="cmdType">
        <option v-for="item in cmds" :value="item.value">{{ item.name }}</option>
      </select>
      <input class="input" placeholder="可指定坐标如  12:88"  v-model="cmdText"/>
      <button class="btn" @click="tapSend">发送</button>
    </div>
  </div>
  <script src="/socket.io/socket.io.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
<script>
function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) { return decodeURIComponent(pair[1]); }
  }
  return (false);
}

let HANDLER_ADMIN = 'HANDLER_ADMIN'

url = 'http://192.168.2.12:3000'
if (getQueryVariable('env') === 'prod') {
  url = 'http://192.168.2.12:3000'
}

var socket = io.connect(url);

</script>
<script>
let cmds = [
      // {
      //   name: '下线',
      //   value: -1
      // },
      // {
      //   name: '上线',
      //   value: -2,
      // },
      // {
      //   name: '打开APP',
      //   value: 1,
      // },
      {
        name: '上滑',
        value: 2,
      },
      {
        name: '右滑',
        value: 3,
      }, 
      {
        name: '下滑',
        value: 4,
      }, 
      {
        name: '左滑',
        value: 5,
      },
      {
        name: '双击',
        value: 6,
      },
      {
        name: '返回',
        value: 7,
      },
      {
        name: '单击',
        value: 8,
      },
      // {
      //   name: '直播输入评论',
      //   value: 9,
      // },
      // {
      //   name: '直播发送评论',
      //   value: 10,
      // },
      // {
      //   name: '首页搜索',
      //   value: 11,
      // },
      // {
      //   name: '搜索输入',
      //   value: 12,
      // },
      // {
      //   name: '点击搜索结果头像',
      //   value: 13,
      // },
      // {
      //   name: '点击个人中心头像',
      //   value: 14,
      // },
    ]
    
var vm = new Vue({
  el: "#app",
  data: {
    cmds: cmds,
    device: '',
    cmdType: 0,
    cmdText: '',
    records: [],
  },
  mounted() {
    socket.on(HANDLER_ADMIN, (data) => {
      console.log(data)
      this.records.push(JSON.parse(data))
    });
    socket.on('disconnect', (reason) => {
      this.records.push({ cmd: -1, text: reason })
    })
    let msg = { cmd: 0, text: '管理后台上线' }
    socket.emit(HANDLER_ADMIN, msg)
  },
  methods: {
    tapSend() {
      console.log(this.device, this.cmdType, this.cmdText)
      if (!this.device) {
        alert("请输入设备设备号")
        return
      }
      let devArray = this.device.split(',')
      let phoneError = false
      devArray.forEach(phone => {
        if (phone.length != 11) {
          //phoneError = true
        }
      });
      if (phoneError) {
        alert("设备设备号错误")
        return
      }
      if (this.cmdType == 0) {
        alert("请选择指令类型")
        return
      }
      if (!this.cmdText) {
        alert("请输入参数")
        return
      }
      let msg = { cmd: this.cmdType, text: this.cmdText, phones: devArray }
      socket.emit(HANDLER_ADMIN, msg);
      this.records.push(msg)
    }
  },
  filters: {
    cmdFilter(val) {
      let txt = ''
      cmds.forEach(item => {
        console.log(item, val)
        if (item.value === parseInt(val)) {
          txt = item.name
        }
      })
      return txt
    }
  }
})
</script>

</html>